<template>
    <div>
        <p>用户登录</p>
        <el-input v-model="username" placeholder="请输入登录名称" />
        <el-input v-model="password" placeholder="请输入登录密码" />
        <el-button type="primary" @click="login">登录</el-button>
        <!-- 弹出式对话框(根据 v-model 绑定的变量确定是否显示对话框)-->
        <el-dialog  v-model="show" width="30%"
                    title="登录失败"
                    :before-close="handleClose">
            <span>{{ message }}</span>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="hide">Cancel</el-button>
                <el-button type="primary" @click="hide">Confirm</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
    
</template>

<script>
export default {
    name: 'LoginView',
    data(){
        return {
            username: 'kaifamiao',
            password: 'kaifamiao',
            show: false , 
            message: ''
        }
    },
    methods: {
        login(){
            if( 'kaifamiao' != this.username ){
                this.message = '用户名错误';
                this.show = true ;
                return ;
            }

            if( 'kaifamiao' != this.password ){
                this.message = '密码错误';
                this.show = true ;
                return ;
            }

            // 将用户名保存到 sessionStorage
            sessionStorage.setItem( 'username' , this.username );
            
            // 登录成功后，采用编程式导航去往 欢迎页面
            this.$router.push( { name: 'welcome' , query: { message: 'login'}} );
            
        },
        hide(){
            this.show = false ;
        },
        handleClose(){
            console.log('关闭对话框');
        }
    },
    beforeRouteEnter(to,from){
        console.log( `LoginView # beforeRouteEnter: ${from.path} to ${to.path}` );
    },
    beforeRouteLeave(to,from){
      console.log(`即将离开${from.path}(LoginView)去往${to.path}`);
    }
}
</script>

<style>

</style>